/**
    我的交易-发布买票-货款报价列表组件
 */
<template>
    <div>
        <el-table
            :data="tableData.body"
            :row-key="get_row_key"
            :expand-row-keys="expandRowKeys"
            @current-change="toggleRowExpansion"
            @row-click="clickTable"
            ref="refTable"
            :default-sort = "{prop: 'offerTime', order: 'descending'}"
            @sort-change="sortChange"
            style="width: 100%"
            @selection-change="selectionChange"
            class="pccData">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="报价机构:">
                                    <span>{{ props.row.enterpriseName }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="求购数量:">
                                    <span>{{ detailData.wantNumbe }}张</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="期限:">
                                    <span >{{ detailData.startTime }}--{{detailData.endTime }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="瑕疵要求:">
                                    <span>{{ detailData.falwRequire.join(',') }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="联系人姓名:">
                                    <span>{{ props.row.contactName }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="联系人手机号:">
                                    <span>{{ detailData.contactPhone }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="原始报价:">
                                    <span>{{ detailData.description }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                v-if="isSelect"
                type="selection"
                width="50">
            </el-table-column>
            <el-table-column
                v-for="item in tableData.header"
                :key="item.key"
                :label="item.label"
                :formatter="item.formatter"
                :prop="item.key"
                :sortable="item.key == 'offerTime' ? 'custom' : false"
            >
            </el-table-column>
            <el-table-column
                label="操作"
                >
                <template slot-scope="scope">
                    <slot :scope="scope"></slot>
                </template>
            </el-table-column>
        </el-table>
        <el-row class="pagination">
            <!-- <el-button type="primary" size="small" class="delete_btn" v-if="isSelect" :disabled="selectionArr.length == 0" @click="delate()">删除</el-button> -->
            <el-pagination
                @current-change="change"
                @size-change="changes"
                :current-page="tableData.footer.currentPage"
                :page-sizes="[10, 15, 20, 30, 40]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.footer.total">
            </el-pagination>
        </el-row>
    </div>
</template>


<script lang='ts'>
    import {Vue, Component, Prop, Emit} from 'vue-property-decorator'
    import { log } from 'util';
    import { setTimeout } from 'timers';
    import DialogInput from '@component/common/DialogInput.vue'

    @Component({
        components: {
            DialogInput
        }
    })
    export default class PccTable extends Vue {
        //是否显示勾选框
        @Prop({
            default: false
        }) isSelect!:boolean
        //列表数据
        @Prop() tableData!:object
        //详情数据
        @Prop() detailData!:object
        //展开行的index
        @Prop({
            default: -1
        }) opendIndex!:number
        //展开的行的集合
        expandRowKeys:any = []
        //勾选的集合
        selectionArr = []
    //methods
        //勾选
        selectionChange(item) {
            this.selectionArr = item
            this.$emit('selection',item)
        }
        //删除
        // delate () {
        //     this.$emit('remove')
        // }
        get_row_key (row:object) {
            return row.index
        }
        //切换展示
        toggleRowExpansion (row:object,expanded:boolean) {   
            this.expandRowKeys = []
            this.expandRowKeys.push(row.index)
        }
        //触发展开/收起
        async clickTable(row:any){
            this.$refs['refTable'].toggleRowExpansion(row)
        }

        //排序
        //@Emit()
        sortChange (column:object) {
            this.$emit('sortChange', column)
        }

        //页码
        @Emit()  
        change (currentPage:number) {}  

        //每页显示条数
        @Emit()
        changes (val:number) {} 

        created () {
            setTimeout(() => {
                this.expandRowKeys.push(this.opendIndex)
            },1000)
        }
    }
</script>

<style lang="scss">
    .el-table__expand-column{
        .cell{
            display: none;
        }
    }
    .pagination{
        padding: 20px 0;
        // display: flex;
        // justify-content: flex-end;
        position: relative;
        .el-pagination {
            position: absolute;
            right: 0;
        }
        .delete_btn{
            position: absolute;
            left: 0;
        }
    }
    .el-table .cell{
        text-align: center;
    }
    .el-table__expanded-cell{
        background-color: $__color-bg-multiple !important;
        &:hover{
            background-color: $__color-bg-multiple !important;
        }
    }
</style>
<style lang="scss">
    .pccData.el-table{
        .el-form.el-form--label-left{
            padding: 10px 0;
            padding-left: 125px;
        }
    }
</style>
